<template>
<!-- base-info  -->
<section class="common-text-block-section">
    <!-- 进度统计组件 -->
    <div data-v-1b5111bc="" class="title-section">
        <div data-v-1b5111bc="" class="title">
            进度统计
        </div>
    </div>
    <section class="process-statistics" v-if="dataList">
        <article v-for="item in dataList.left" :key="item.status" class="item-left">
            <header>
                {{ item.title }}
            </header>
            <el-progress
                type="dashboard"
                :width="100"
                :stroke-width="4"
                :percentage="item.percent"
                :color="getColor">
            </el-progress>
            <section>
                {{ item.number }}
            </section>
        </article>
        <!-- <el-popover
            v-for="item in dataList.right"
            :key="item.title"
            placement="bottom"
            trigger="hover"
            class="item-right">
            <div slot="content" ref="popovers" class="tip-chart">
                图表生成中，请稍后查看...
            </div>
            <article slot="reference">
                <header>
                    {{ item.title }}
                </header>
                <el-progress
                    type="dashboard"
                    :width="80"
                    :stroke-width="4"
                    :percentage="item.percent">
                </el-progress>
                <section>
                    {{ item.number }}
                </section>
            </article>
        </el-popover> -->
        <el-popover
            v-for="item in dataList.right"
            :key="item.title"
            placement="bottom"
            trigger="hover"
            class="item-right">
            <div ref="popovers" class="tip-chart">
                图表生成中，请稍后查看...
            </div>
            <article slot="reference" class="small-progress">
                <header>
                    {{ item.title }}
                </header>
                <el-progress
                    type="dashboard"
                    :width="80"
                    :stroke-width="4"
                    :percentage="item.percent">
                </el-progress>
                <section>
                    {{ item.number }}
                </section>
            </article>
        </el-popover>
    </section>
</section>
</template>

<script>
import * as echarts from 'echarts';
import { Popover } from 'element-ui';

export default {
    props: ['dataList'],
    components: {
        popover: Popover
    },
    // 数据结构示例:
    // {
    //     "left": [
    //         {
    //             "title": "财务自动化",
    //             "percent": 100,
    //             "number": 42
    //         },
    //         {
    //             "title": "财务完成",
    //             "percent": 4,
    //             "number": 2
    //         }
    //     ],
    //     "right": [
    //         {
    //             "title": "信息上传",
    //             "percent": 64,
    //             "number": 27,
    //             "childrenData": [
    //                 {
    //                     "title": "待上传资料",
    //                     "value": 19
    //                 },
    //                 {
    //                     "title": "票据处理中",
    //                     "value": 2
    //                 },
    //                 {
    //                     "title": "待客户上传",
    //                     "value": 6
    //                 }
    //             ]
    //         },
    //         {
    //             "title": "信息核对",
    //             "percent": 9,
    //             "number": 4,
    //             "childrenData": [
    //                 {
    //                     "title": "待核对",
    //                     "value": 1
    //                 },
    //                 {
    //                     "title": "核对中",
    //                     "value": 1
    //                 },
    //                 {
    //                     "title": "票据异常",
    //                     "value": 1
    //                 },
    //                 {
    //                     "title": "尚未抄报税",
    //                     "value": 1
    //                 }
    //             ]
    //         },
    //         {
    //             "title": "智能做账",
    //             "percent": 28,
    //             "number": 12,
    //             "childrenData": [
    //                 {
    //                     "title": "做账中",
    //                     "value": 3
    //                 },
    //                 {
    //                     "title": "待客户完善",
    //                     "value": 2
    //                 },
    //                 {
    //                     "title": "待确认",
    //                     "value": 5
    //                 },
    //                 {
    //                     "title": "财务完成",
    //                     "value": 2
    //                 }
    //             ]
    //         }
    //     ]
    // }
    data() {
        return {
            total: 0,
            pageStatusList: [],
            bizStatusList: [],
            colors: [
                {color: '#f56c6c', percentage: 20},
                {color: '#e6a23c', percentage: 40},
                {color: '#5cb87a', percentage: 60},
                {color: '#1989fa', percentage: 80},
                {color: '#6f7ad3', percentage: 100}
            ]
        };
    },
    watch: {
        dataList(dataList) {
            if (dataList.left || dataList.right) {
                this.$nextTick(() => {
                    this.renderChart(dataList);
                });
            }
            this.$nextTick(() => {
                // const chart = echarts.init(this.$refs.aaaa);
                // const option = {
                //     xAxis: {
                //         type: 'category',
                //         data: []
                //     },
                //     yAxis: {
                //         show: false,
                //         type: 'value'
                //     },
                //     series: [{
                //         data: [],
                //         type: 'bar',
                //         barWidth : 30,
                //         itemStyle: {
                //             normal: {
                //                 color(params) {
                //                     const colorList = ['#ddffbc','#91c788','#52734d','#409EFF'];
                //                     return colorList[params.dataIndex];
                //                 },
                //                 width: 10,
				// 				label: {
                //                     // 开启显示
				// 					show: true,
                //                     // 在上方显示
				// 					position: 'top',
                //                     // 数值样式
				// 					textStyle: {
				// 						color: 'black',
				// 						fontSize: 16
				// 					}
				// 				}
				// 			}
				// 		}
                //     }],
                //     grid: {
                //         top: 40,
                //         // bottom: 25,
                //         left: 25,
                //         right: 25,
                //         width: 400,
                //         height: 200
                //     }
                // };
                // dataList.right[0].childrenData.forEach(item => {
                //     option.xAxis.data.push(item.title);
                //     option.series[0].data.push(item.value);
                // });
                // chart.setOption(option);
            });
        }
    },
    methods: {
        getColor(value) {
            let color;
            if (value < 33) {
                color = '#e6a23c';
            }
            else if (value < 66) {
                color = '#1989fa';
            }
            else {
                color = '#5cb87a';
            }
            return color;
        },

        /**
         * 渲染柱状图
         */
        renderChart(dataList) {
            console.log(this.$refs.popovers)
            for (let index = 0; index < this.$refs.popovers.length; index++) {
                const el = this.$refs.popovers[index];
                el.style.width = '250px';
                el.style.height = '150px';
                const chart = echarts.init(el);
                const option = {
                    tooltip:{
                        trigger:'axis',
                    },
                    xAxis: {
                        type: 'category',
                        data: [],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#999",
                            }
                        },
                        axisLabel:{
                            interval: 0
                        }
                    },
                    yAxis: {
                        show: false,
                        type: 'value'
                    },
                    series: [{
                        data: [],
                        type: 'bar',
                        barWidth : '40%',
                        itemStyle: {
                            normal: {
                                color(params) {
                                    const colorList = ['#7DACFA','#409EFF','#2778FD','#005CB9'];
                                    return colorList[params.dataIndex];
                                },
                                width: 10,
                                label: {
                                    // 开启显示
                                    show: true,
                                    // 在上方显示
                                    position: 'top',
                                    // 数值样式
                                    textStyle: {
                                        color: 'black',
                                        fontSize: 12
                                    }
                                }
                            }
                        }
                    }],
                    grid: {
                        top: 20,
                        bottom: '13%',
                        left: '3%',
                        right: '4%',
                        
                    }
                };
                dataList.right[index].childrenData.forEach(item => {
                    option.xAxis.data.push(item.title);
                    option.series[0].data.push(item.value);
                });
                chart.setOption(option);
            }
        }
    }
}
</script>

<style lang="less">
@import '../assets/var.less';
.process-statistics {
    display: flex;
    > header {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;
        text-align: center;
        > div {
            font-size: 18px;
            img {
                width: 50px;
            }
            .text {
                vertical-align: 19px;
            }
        }
        > span {
            color: @color-grey-low;
            font-size: 16px;
        }
        
    }
    > article, .item-right {
        flex: 1;
        text-align: center;
        > header {
            padding-bottom: 5px;
            color: @color-grey;
        }
        > section {
            font-size: 18px;
        }
        > footer {
            > div {
                display: inline-block;
                vertical-align: middle;
            }
            img {
                width: 40px;
            }
            .percent {
                margin-right: -30px;
                font-size: 12px;
                color: @color-grey-low;
                vertical-align: 21px;
            }
        }
    }

    .item-left {
        > section {
            margin-top: -20px;
        }
    }
    .item-right {
        > header {
            padding-top: 10px;
        }
        > section {
            margin-top: -15px;
        }
    }
    .item-left + .item-right {
        border-left: 1px solid @color-grey-lower;
    }
}

.aaaa {
    position: absolute;
    z-index: 100;
    left: 30px;
    top: 30px;
    width: 450px;
    height: 300px;
    background: #fff;
    border: 2px solid gray;
}

.el-popover{
    // opacity:0.65;
    box-shadow: 0 0 8px #ccc;
}
    .small-progress {
        flex: 1;
        text-align: center;
        > header {
            padding-bottom: 5px;
            color: @color-grey;
        }
        > section {
            font-size: 18px;
        }
        > footer {
            > div {
                display: inline-block;
                vertical-align: middle;
            }
            img {
                width: 40px;
            }
            .percent {
                margin-right: -30px;
                font-size: 12px;
                color: @color-grey-low;
                vertical-align: 21px;
            }
        }
    }

</style>
